<!-- 
  setup 语法糖
    1. Vue@3.2.0 版本正式毕业，可以放心使用的一个特性
    2. 不需要写 export default {} 
    3. 顶层的内容会直接暴露给模板
    4. 组件引入进来之后可以直接使用，无需注册
    5. 自定义指令引入进来以v开头就会当成自定义指令
    6. name 与 inheritAttrs 选项可以：
        1. 再写一个不带 setup 的 script
            <script>
            export default {
              name: 'Abcd',
              inheritAttrs: false
            }
            </script>
        2. 使用 Vue@3.3+ 之后支持的 defineOptions() 编译器宏（无需引入）
    7. data 选项的工作，交给 ref() 与 reactive() 来创建响应式数据
    8. props 选项，通过 defineProps() 编译器宏来声明
    9. emits 选项，通过 defineEmits() 编译器宏来声明
    10. computed 选项，通过 computed() 来玩
    11. methods 选项，在顶层定义的方法就可以了。
    12. watch 选项，通过 watch() 来玩。
    13. expose 选项，通过 defineExpose() 编译器宏来处理
    14. render 选项，没有方法可以在 setup 语法糖来玩。
    15. slots数据与attrs数据，可以通过 useSlots() 和 useAttrs() 来获取
    16. 除了 beforeCreate 与 created 两个生命周期钩子函数之外，其余的都可以通过与之对应的 on 开头的函数来玩
            beforeMount       onBeforeMount
            mounted           onMounted
            beforeUpdate      onBeforeUpdate
            updated           onUpdated
            beforeUnmount     onBeforeUnmount
            unmounted         onUnmounted
            activated         onActivated
            deactivated       onDeactivated
    17. provide 与 inject 选项，通过 provide() 与 inject() 来替代
    18. mixins 选项，直接不要用了。使用 组合式函数（hook）来替代

 -->

<template>
  <div>
    <h1>Setup 语法糖</h1>
    <p>num1 {{ num1 }}</p>
    <button @click="add">add</button>
    <button v-copy="'张三'">拷贝张三</button>
    <button @click="getHello">获取 Hello 组件实例</button>

    <Hello ref="myHello" a="10" b="20" @change="fn1" />

    <input type="text" v-focus />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Hello from './components/Hello.vue'
import vFocus, { copy as vCopy } from './directives/focus'

defineOptions({
  name: 'Abcd',
  inheritAttrs: false
})

const num1 = ref(1)
const add = () => {
  console.log('add')
}
function fn1(name) {
  console.log('Hello 组件的 change 事件处理函数', name)
}

const myHello = ref(null)
function getHello() {
  console.log('myHello.value', myHello.value)
}
</script>
